<script lang="ts" setup>
import { SwitchingTime } from '@/utils/tools'

const { filterList, yearMonths } = defineProps<{
  filterList: any
  yearMonths: any
}>()
</script>
<template>
  <view class="year-months">{{ yearMonths }}</view>
  <view class="_list">
    <view class="_item" v-for="item in filterList" :key="item.id">
      <view class="_top">
        <view>{{ item.status === 1 ? '完成订单' : '已撤销' }}</view>
        <view class="_data">+{{ item.integral }}</view>
      </view>
      <view class="_bottom">{{ SwitchingTime(item.createTime) }}</view>
    </view>
  </view>
</template>
<style lang="scss">
.year-months {
  color: #2b2b2b;
  font-size: 26rpx;
  margin-bottom: 20rpx;
}
._list {
  width: 702rpx;
  min-height: 142rpx;
  border-radius: 16rpx;
  background: #fff;
  padding: 28rpx;
  margin-bottom: 20rpx;
  ._item {
    border-bottom: 1px solid #0000001a;
    padding: 20rpx 0;
    ._top {
      display: flex;
      justify-content: space-between;
      color: #000;
      font-size: 26rpx;
      ._data {
        font-size: 30rpx;
      }
    }
    ._bottom {
      margin-top: 16rpx;
      color: #a3a3a3;
      font-size: 24rpx;
    }
  }
  ._item:first-child {
    padding: 0 0 20rpx;
  }
  ._item:last-child {
    border-bottom: 0 solid #0000001a;
    padding: 20rpx 0 0;
  }
}
</style>
